<template>
  <p-modal
    class="previewModal"
    title="SOP预览"
    v-model="visible"
    :width="1158"
    :mask-closable="false"
  >
   <preview 
    :options="options" 
    :product-name="$store.state.process.baseInfo.productName" 
    :visible="visible" ref="preview" />
   <!-- 渲染 -->
  <template slot="footer">
    <p-pagination v-if="preview" class="pageSplit"
      @change="paginationChange" 
      v-model="current" 
      :total="$refs.preview.optionData.length + $refs.preview.picturesData.length"
      :pageSize="1"
      show-less-items />
    <div class="btnWrap">
      <p-button @click="onCancel">取消</p-button>
      <!-- <p-button type="primary" @click="printClick">打印</p-button> -->
    </div>
  </template>
  </p-modal>
</template>

<script>
import Page from './page'
import pagePics from './pagePics'
import _ from "lodash";
import NoData from "@/components/NoData";
import preview from "./index";
import printJS from "print-js";
export default {
  components: {
    Page,
    pagePics,
    NoData,
    preview,
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      current: 1,
      visible: false,
      preview: false,
    }
  },
  watch: {
    value() {
      this.initValue();
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val);
        this.$refs.preview.renderPageShow = false;
        this.$refs.preview.previewPagePicsShow = false;
        this.$refs.preview.renderPagePicsShow = false;
      }else {
        this.$nextTick( () =>{
          this.preview = true;
          this.$refs.preview.calculateTable();
          this.$refs.preview.calculatePics('.previewPage .picturesCon',true);
        })
      }
    }
  },
  mounted() {
    this.initValue();
  },
  methods: {
    printClick(){
      printJS({
        printable: this.$refs.preview.$refs.renderPage.outerHTML,
        type: 'raw-html',
      });
    },
    initValue() {
      this.visible = this.value
    },
    onCancel() {
      this.visible = false
    },
    paginationChange(){
      let ypos = (this.current - 1) * 782 ;
      document.querySelector('.previewModal .poros-modal-body').scrollTo(0,ypos)
    },
  }
}
</script>
<style lang="less">
.previewModal{
  .poros-modal{
    top: 10px;
  }
  .poros-modal-body{
    padding: 15px;
    height: 790px;
    overflow: auto;
    background-color: rgb(218, 220, 224);
  }
  .poros-modal-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>